<!doctype html>
<title>chops-tab-bar demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module" src="/elements/chops-tab-bar.js"></script>
<script type="module" src="/elements/chops-tab.js"></script>
<style>
body {
  margin: 0;
  padding: 0;
}
.tab {
  border: 2px solid blue;
  padding: 4px;
}
</style>
<chops-tab-bar id="bar" .selected="b">
  <chops-tab name="a" onclick="handle(event)">aaa</chops-tab>
  <chops-tab name="b" onclick="handle(event)">bbb</chops-tab>
  <chops-tab name="c" onclick="handle(event)">ccc</chops-tab>
</chops-tab-bar>
<div class="tab" id="tab_a">
  aisle<br>
  aardvark<br>
  apple<br>
</div>
<div class="tab" id="tab_b">
  bdellium<br>
  banana<br>
  bratwurst<br>
</div>
<div class="tab" id="tab_c">
  czar<br>
  chicken<br>
  cat<br>
</div>
<script>
function handle(event) {
  bar.selected = event.target.name;
  for (const tab of document.querySelectorAll('.tab')) {
    tab.style.display = (tab.id === 'tab_' + bar.selected) ? 'block' : 'none';
  }
}
handle({target: {name: 'b'}});
</script>
